<template>
	<view
		style="padding-top: 15vh; background-color: #ffffff; position: absolute; top: 0px; bottom: 0px; right: 0; left: 0;">
		<view class="logo" style="text-align: center;">
			<!-- 	<p>你好，</p>
			<p>欢迎来到橙单！</p> -->
			<image :src="logoIcon" mode="widthFix" style="width: 100px;height: 100px;"></image>
		</view>
		<view class="inputs">
			<u-input class="inp" v-model="formData.loginName" :height="44" placeholder="请输入账号"
				:custom-style="inputCustomStyle">
			</u-input>
		</view>
		<view class="inputs">
			<u-input class="inp" v-model="formData.password" :height="44" placeholder="请输入密码"
				:custom-style="inputCustomStyle" type="password">
			</u-input>
		</view>
		<view style="margin: 5vh 24px 0px 24px;">
			<u-button @click="login" style="background-color: #21a1f1; color: white;">登录</u-button>
			<!-- <view class="agree">登录即表明同意<text>《用户协议》</text>和<text>《隐私协议》</text></view> -->
		</view>
		<!-- <u-button class="login-btn" @click="login">登录</u-button> -->
		<!-- <image class="slogan-icon" :src="sloganIcon" mode="widthFix"></image> -->
		 <view class="slogan-icon">—上海市崇明教育学院版权所有—</view>
		 <a class="slogan-icon2" href="https://beian.mps.gov.cn">沪ICP备17050622号-1</a>
		 <!-- <a class="slogan-icon2" href="https://beian.miit.gov.cn/">沪ICP备17050622号-1</a> -->
		 <!-- <a target="_blank" class="smart-version slogan-icon" href=" "> 沪ICP备17050622号-1 </a > -->
	</view>
</template>

<script>
	import {
		SystemController
	} from '@/api/index.js';
	import {
		encrypt
	} from '@/utils'
	import accountIcon from '@/static/login/account-icon.png';
	import passwordIcon from '@/static/login/password-icon.png';
	import passwordVisualIcon from '@/static/login/password-visual-icon.png';
	import passwordInvisibleIcon from '@/static/login/password-invisible-icon.png';
	import sloganIcon from '@/static/login/slogan-icon.png';
	import logoIcon from '@/static/login/logogx.png'
	export default {
		data() {
			return {
				accountIcon: accountIcon,
				passwordIcon: passwordIcon,
				passwordVisualIcon: passwordVisualIcon,
				passwordInvisibleIcon: passwordInvisibleIcon,
				sloganIcon: sloganIcon,
				logoIcon: logoIcon,
				passwordVisual: false,
				inputCustomStyle: {
					"padding": "0",
					"height": "44px"
				},
				checkboxValue: null,
				formData: {
					loginName: '',
					password: ''
				}

			}
		},
		
		methods: {
			radioChange(detail) { //记住密码
				this.checkboxValue = detail
			},
		
			login() {
				let that = this
				SystemController.loginMobile(this, {
					loginName: this.formData.loginName,
					password: encrypt(this.formData.password)
				}).then((res) => {
					uni.setStorage({
						key: 'setHomeEntryList',
						data: res.mobileEntryList,
						success: function(e) {

							let obj = {
								loginName: that.formData.loginName,
								password: (that.formData.password)
							}
							// 登录成功后将用户名密码存储到文件
							try {
								that.$filePersistentIO.storage("RM_USR_INFO.txt", obj);
							} catch (error) {
								// 浏览器会失效
							}
							uni.setStorage({
								key: 'token',
								data: res.tokenData,
								success: function() {
									uni.switchTab({
										url: '/pages/work/index'
									})
								}
							});

							uni.setStorage({
								key: 'userId',
								data: res.userId
							});
							uni.setStorage({
								key: 'userInfo',
								data: res
							});
						}
					})
				}).catch((e) => {
					console.log(e)
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.logo {
		width: 100%;
		// margin: 0px 24px;
		margin-bottom: 7vh;

		// image {
		// 	width: 3.375rem;
		// 	height: 3.375rem;
		// 	margin-bottom: 5px;
		// }

		p {
			height: 35px;
			line-height: 35px;
			font-size: 24px;
			color: #333333;
			font-weight: 500;
		}
	}


	.inputs {
		padding: 0 20rpx;
		background: #fafafa;
		margin: 20rpx 48rpx;

		.inp {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
		}
	}

	.agree {
		margin-top: 32rpx;
		color: #939393;
		font-size: 28rpx;
		text-align: center;

		text {
			color: $u-type-primary;
		}
	}

	.slogan-icon {
		width: 100%;
		height: auto;
		text-align: center;
		position: fixed;
		bottom: 4vh;
		font-size: 24rpx;
		color: #8c92a4;
		// right: calc((100% - 54vw) / 2);
	}
	.slogan-icon2 {
		width: 100%;
		height: auto;
		text-align: center;
		position: fixed;
		bottom: 2vh;
		font-size: 22rpx;
		color: #8c92a4;
		// right: calc((100% - 54vw) / 2);
	}
</style>
<style>
	.u-input__right-icon__clear {
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>